<template>
    <div>
        <!-- 轮播图 -->
        <Carousel />
        <!-- 搜索表单 -->
        <Search />
        <!-- 医院信息 -->
        <!-- 平台广告 -->
        <el-row :gutter="20">
            <el-col :span="20" :offset="0">
                <h1>医院</h1>
                <Level @get-level="getLevel" :dict="levelData" title="等级" />
                <Level @get-region="getRegion" :dict="regionData" title="地区" />
                <!-- <Region /> -->
                <div class="card" v-if="hospitalArr.length > 0">
                    <Card :hospital="item" class="item" v-for="(item, index) in hospitalArr" :key="index" />
                </div>
                <el-empty v-else description="暂无数据" />
                <el-pagination @size-change="sizeChange" @current-change="getHospital()"
                    v-model:current-page="currentPage" :page-sizes="[6, 10, 16, 20, 30]" v-model:page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background>>
                </el-pagination>
            </el-col>
            <el-col :span="4" :offset="0">
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { useDict } from './composables/useDict'
import Carousel from './components/carousel/index.vue'
import Search from './components/search/index.vue'
import Level from './components/level/index.vue'
import Card from './components/card/index.vue'
import { useHospital } from './composables/useHospital'
import Tip from './components/tip/index.vue'

const { levelData, regionData } = useDict()
const { pageSize, currentPage, totalNum, hospitalArr,
    getHospital, getLevel, getRegion } = useHospital()

const sizeChange = () => {
    currentPage.value = 1
    getHospital()
}
</script>

<style scoped lang="scss">
h1 {
    font-weight: 900;
    color: #7f7f7f;
    margin-bottom: 20px;
}

::v-deep .el-card {
    border: 1px solid #eee;
}

.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 48%;
        margin: 10px 0;
    }
}
</style>